<template>
  <ContentField>
    <div class="card" v-for="user in users" :key="user.id">
      <div class="card-body">
        <div class="row">
          <div class="col-1">
            <img class="img-fluid" :src="user.photo" alt="">
          </div>
          <div class="col-11">
            <div class="username">{{ user.username }}</div>
            <div class="followerCount">粉丝数：{{ user.followerCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </ContentField>
</template>

<script>
import ContentField  from '@/components/ContentField.vue';
import $ from 'jquery'
import { ref } from 'vue';


export default {
  name: 'UserListView',
  components: {
    ContentField,
  },

  setup() {
    let users = ref([]);

    $.ajax({
      url: 'http://127.0.0.1:3005/myspace/userlist/',
      type: 'get',
      success(resp){
        console.log(resp);
        users.value = resp;
      }

    });

    return {
      users,
    }
  }
}
</script>

<style scoped>
.card {
  margin-bottom: 20px;
  cursor: pointer;
}

img {
  border-radius: 50%;
}

.username {
  font-weight: bold;
}

.followerCount {
  font-size: 80%;
  color: gray;
}

.card:hover {
  box-shadow: 2px 2px 10px lightgray;
}
</style>